<title>系统配置</title>
<style>
    .layui-btn-sm {
        height: 38px;
        line-height: 38px;
    }

    .layui-upload-img {
        max-height: 150px;
        max-width: 150px;
    }

    .img-div{
        display: inline-block;
        margin: 0 10px 10px 0;
        max-height: 150px;
        max-width: 150px;
    }

    .del_show {
        position: relative;
        display: block;
        margin: -24px auto 0;
        text-align: center;
        color: #fff;
        background: rgba(0,0,0,0.5);
    }

    .layui-form-item .layui-form-label{ width: 150px }
    .layui-form-item .layui-input-block{ margin-left: 180px }
</style>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>常规管理</cite></a>
        <a><cite>系统配置</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div id="configView"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script id="configTpl" type="text/html">
    <div class="layui-tab layui-tab-brief" id="config-component-tabs" lay-filter="configTabs">
        <ul class="layui-tab-title">
            {{# let i = 0; }}
            {{# layui.each(d.tabList, function(index, item){ }}
                {{# i++;}}
            <li class="{{# if(i <= 1){ }}layui-this{{# } }}" lay-id="{{ index }}" data-flag="{{ index }}">{{ item }}</li>
            {{# }); }}
        </ul>
        <div class="layui-tab-content">
            {{# let s = 0; }}
            {{# layui.each(d.tabList, function(index, item){ }}
                {{# s++; }}
            <div class="layui-tab-item {{# if(s <= 1){ }}layui-show{{# } }}" id="{{ index }}">
                <form class="layui-form" lay-filter="configPage" style="padding: 20px 30px 0 0;">
                    {{# layui.each(d.list[index]['list'], function(key, val){ }}
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            {{# if(val['rule'] == 'required'){ }}
                            <span class="required_class">*</span>
                            {{# } }}
                            {{val['title']}}：
                        </label>
                        <div class="layui-input-block">
                            {{# if(val['type'] == 'string' || val['type'] == 'number' || val['type'] == 'password'){ }}
                            <!-- 文本框、数字框、密码框 -->
                            <input type="{{# if(val['type'] == 'string'){ 'text' }else{ val['type'] } }}"
                                   name="{{val['name']}}"
                                   value="{{val['value']}}" lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                   placeholder="{{val['tip']}}" autocomplete="off" class="layui-input" />
                            {{# }else if(val['type'] == 'radio' || val['type'] == 'checkbox'){ }}
                            <!-- 单选、多选 -->
                                {{# layui.each(val['content'], function(k, v){ }}
                            <input type="{{val['type']}}" name="{{val['name']}}"  {{# if(val['value']+'' === k+''){ }} checked {{# } }} value="{{k}}" title="{{v}}" />
                                {{# }); }}
                                {{# if(val['tip']){ }}
                            <p class="required_class">*{{val['tip']}}</p>
                                {{# } }}
                            {{# }else if(val['type'] == 'switch'){ }}
                            <!-- 开关 -->
                            {{#
                                let layText = 'ON|OFF';
                                layui.each(val['content'], function(k, v){
                                    if(layText == 'ON|OFF'){
                                        layText = v + "|";
                                    }else{
                                        layText += v;
                                    }
                                });
                            }}
                            <input class="switch" type="checkbox" value="1" {{# if(val['value']+'' === '1'){ }} checked {{# } }} lay-filter="switchConfig{{val['id']}}"
                                   lay-skin="switch" title="{{ layText }}" data-id="{{val['id']}}" />
                            <input type="hidden" id="switchConfig{{val['id']}}" name="{{val['name']}}" value="{{ val['value'] ?  val['value'] : 2 }}" />
                                {{# if(val['tip']){ }}
                            <p class="required_class">*{{val['tip']}}</p>
                                {{# } }}
                            {{# }else if(val['type'] == 'textarea'){ }}
                            <!-- 文本域 -->
                            <textarea name="{{val['name']}}" placeholder="{{val['tip']}}" lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                      class="layui-textarea">{{val['value']}}</textarea>
                            {{# }else if(val['type'] == 'array'){ }}
                            <!-- 数组模板 -->
                            <div class="{{val['type']}}_template" style="display: none;">
                                <div class="layui-row layui-col-space10 {{val['type']}}_node">
                                    <div class="layui-col-md2">
                                        <input type="text" name="{{val['name']}}[0]['key']"
                                               value=""
                                               lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                               placeholder="" autocomplete="off" class="layui-input array_key" />
                                    </div>
                                    <div class="layui-col-md2">
                                        <input type="text" name="{{val['name']}}[0]['value']"
                                               value=""
                                               lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                               placeholder="" autocomplete="off" class="layui-input array_value" />
                                    </div>
                                    <div class="layui-col-md1">
                                        <span class="layui-btn layui-btn-primary layui-btn-sm"
                                              onclick="delArray(this)">
                                            <i class="layui-icon">&#xe640;</i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- 数组 -->
                            <div class="{{val['type']}}_{{val['id']}}">
                                {{# if(!val['value']){ }}
                                <div class="layui-row layui-col-space10 {{val['type']}}_node">
                                    <div class="layui-col-md2">
                                        <input type="text" name="{{val['name']}}[0]['key']"
                                               value=""
                                               lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                               placeholder="" autocomplete="off" class="layui-input" />
                                    </div>
                                    <div class="layui-col-md2">
                                        <input type="text" name="{{val['name']}}[0]['value']"
                                               value=""
                                               lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                               placeholder="" autocomplete="off" class="layui-input" />
                                    </div>
                                    <div class="layui-col-md1">
                                        <span class="layui-btn layui-btn-primary layui-btn-sm"
                                              onclick="delArray(this)">
                                            <i class="layui-icon">&#xe640;</i>
                                        </span>
                                    </div>
                                </div>
                                <div class="layui-row layui-col-space10 {{val['type']}}_node">
                                    <div class="layui-col-md2">
                                        <input type="text" name="{{val['name']}}[1]['key']"
                                               value=""
                                               lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                               placeholder="" autocomplete="off" class="layui-input" />
                                    </div>
                                    <div class="layui-col-md2">
                                        <input type="text" name="{{val['name']}}[1]['value']"
                                               value=""
                                               lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                               placeholder="" autocomplete="off" class="layui-input" />
                                    </div>
                                    <div class="layui-col-md1">
                                        <span class="layui-btn layui-btn-primary layui-btn-sm"
                                              onclick="delArray(this)">
                                            <i class="layui-icon">&#xe640;</i>
                                        </span>
                                    </div>
                                </div>
                                {{# }else{ }}
                                    {{#
                                        layui.each(val['value'], function(key, obj){
                                            let arr = Object.entries(obj);
                                    }}
                                <div class="layui-row layui-col-space10 {{val['type']}}_node">
                                    <div class="layui-col-md2">
                                        <input type="text" name="{{val['name']}}[{{key}}]['key']"
                                               value="{{arr[0][1]}}"
                                               lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                               placeholder="" autocomplete="off" class="layui-input" />
                                    </div>
                                    <div class="layui-col-md2">
                                        <input type="text" name="{{val['name']}}[{{key}}]['value']"
                                               value="{{arr[1][1]}}"
                                               lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}"
                                               placeholder="" autocomplete="off" class="layui-input" />
                                    </div>
                                    <div class="layui-col-md1">
                                        <span class="layui-btn layui-btn-primary layui-btn-sm"
                                              onclick="delArray(this)">
                                            <i class="layui-icon">&#xe640;</i>
                                        </span>
                                    </div>
                                </div>
                                    {{# }) }}
                                {{# } }}
                            </div>
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md4">
                                        <span class="layui-btn layui-btn-primary layui-btn-sm" onclick="addArray(this)"
                                              data-id="{{val['id']}}"
                                              data-name="{{val['name']}}" style="float: right">
                                            <i class="layui-icon">&#xe654;</i>添加
                                        </span>
                                </div>
                            </div>
                            {{# }else if(['datetime', 'date', 'time', 'year', 'month', 'hour', 'minute'].indexOf(val['type']) > -1){ }}
                            <!-- 日期(年月日时分秒) -->
                            <div class="layui-col-md2">
                                <input type="text" class="layui-input times {{val['type']}}" readonly name="{{val['name']}}"
                                       data-type="{{val['type']}}" placeholder="{{val['tip']}}" value="{{val['value']}}" />
                            </div>
                            {{# }else if(val['type'] == 'select'){ }}
                            <div class="layui-col-md4">
                                <select name="{{val['name']}}"
                                        lay-verify="{{# if(val['rule'] == 'required'){ }}required{{# } }}" lay-search>
                                    <option value="">{{val['tip']}}</option>
                                    {{# layui.each(val['content'], function(k, v){ }}
                                    <option value="{{k}}" {{# if(val['value']+'' === k+''){ }} selected {{# } }} >{{v}}</option>
                                    {{# }); }}
                                </select>
                            </div>
                            {{# }else if(val['type'] == 'xm-select' || val['type'] == 'xm-selects'){ }}
                            <!-- xmSelect单选、多选 -->
                            <div class="layui-col-md4 xm-select" data-type="{{val['type']}}" data-key="{{key}}"
                                 data-id="{{val['id']}}" data-flag="{{index}}" data-tip="{{val['tip']}}"></div>
                            <input type="hidden" id="xmSelectTxt{{val['id']}}" name="{{val['name']}}" value="{{val['value']}}" />
                            {{# }else if(val['type'] == 'editor'){ }}
                            <!-- 富文本 -->
                            <div class="layui-col-md12" style="border: 1px solid #ccc;"
                                 id="wangEditor_toolbar_{{val['id']}}" data-type="{{val['type']}}"
                                 data-key="{{key}}" data-id="{{val['id']}}"></div>
                            <div class="layui-col-md12 wangEditor" style="height: 350px;border: 1px solid #ccc;"
                                 id="wangEditor_{{val['id']}}" data-type="{{val['type']}}"
                                 data-key="{{key}}" data-id="{{val['id']}}" data-tip="{{val['tip']}}"></div>
                            <input id="wangEditor_txt_{{val['id']}}" type="hidden" name="{{val['name']}}" value="{{val['value']}}" />
                            {{# }else if(val['type'] == 'city'){ }}
                            <!-- 城市 -->
                            <div class="layui-col-md4 city" data-type="{{val['type']}}" data-key="{{key}}"
                                 data-flag="{{index}}" data-tip="{{val['tip']}}" data-id="{{val['id']}}"></div>
                            <input type="hidden" id="cityIdTxt{{val['id']}}" name="{{val['name']}}" value="{{val['value']}}" />
                            {{# }else if(val['type'] == 'image' || val['type'] == 'images' || val['type'] == 'file' || val['type'] == 'files'){ }}
                            <!-- 单图、多图上传 -->
                            <div class="layui-col-md12">
                                <div class="layui-upload">
                                    <button type="button" class="layui-btn uploadFile" id="upload_file_btn{{val['id']}}"
                                            data-type="{{val['type']}}" data-key="{{key}}" data-flag="{{index}}"
                                            data-id="{{val['id']}}" data-name="{{val['name']}}">
                                        {{# if(val['type'] === 'file' || val['type'] === 'files'){ }}
                                        文件上传
                                        {{# }else{ }}
                                        图片上传
                                        {{# } }}
                                    </button>
                                    <div class="layui-upload-list" id="upload_file_more_list{{val['id']}}">
                                        {{#
                                            let fileList = [];
                                            if(val['value']){
                                                fileList = val['value'].split(",");
                                            }
                                        }}
                                        {{# if(fileList[0]){ }}
                                            {{# layui.each(fileList, function(k, v){ }}
                                        <div class="img-div" {{# if(val['type'] === 'file' || val['type'] === 'files'){ }} style="width: 100px" {{# } }}>
                                            {{#
                                                let fileIndex = v.lastIndexOf("/");
                                                let fileLen = v.length;
                                                let fileName = v.substring(fileIndex + 1, fileLen);
                                                let fileUrl = v;
                                                if(val['type'] === 'file' || val['type'] === 'files'){
                                                    if(fileName.indexOf(".png") > -1 || fileName.indexOf(".jpeg") > -1 || fileName.indexOf(".jpg") > -1 ){
                                                        fileUrl = "../static/images/file.png";
                                                    }
                                                }
                                            }}
                                            <img class="layui-upload-img" {{# if(val['type'] === 'file' || val['type'] === 'files'){ }} style="width: 100px" {{# } }}
                                                id="upload_file{{val['id']}}" alt="{{fileName}}" src="{{ common.cdnUrlFilter(fileUrl) }}">
                                            <a href="javascript:void(0)" class="layui-icon layui-icon-delete del_show"
                                               style="display: block"  data-id="{{val['id']}}" data-type="{{val['type']}}"></a>
                                            <div class="ellipsis">{{ fileName }}</div>
                                            <input type="hidden" class="fileList{{val['id']}}" value="{{fileUrl}}">
                                        </div>
                                            {{# }) }}
                                        {{# } }}
                                    </div>
                                <input type="hidden" id="fileUrl{{val['id']}}" name="{{val['name']}}" value="{{val['value']}}">
                                {{# if(val['tip']){ }}
                                <p class="required_class">*{{val['tip']}}</p>
                                {{# } }}
                            </div>
                            </div>
                            {{# }else if(val['type'] == 'color'){ }}
                            <!-- 颜色选择器 -->
                            <div class="layui-input-inline" style="width: 120px;">
                                <input type="text" id="colorText{{val['id']}}" name="{{val['name']}}" readonly value="{{val['value']}}" placeholder="请选择颜色" class="layui-input" />
                            </div>
                            <div class="layui-inline" style="left: -11px;">
                                <div class="layui-input-inline colorPicker" id="colorPicker{{val['id']}}" data-id="{{val['id']}}" ></div>
                            </div>
                            {{# }else if(val['type'] == 'slider-range'){ }}
                            <div class="layui-input-inline" style="width: 100%;">
                                <!-- 滑块范围 -->
                                <div id="slider-range-{{val['id']}}" data-id="{{val['id']}}" data-key="{{key}}" data-flag="{{index}}" style="padding: 18px 0 0 0;width: 70%;float: left" class="test-slider-demo slider-range"></div>
                                <div style="width: 80px;float: left;margin-left: 30px;"><input type="text" class="layui-input" id="slider-range-input-{{val['id']}}" readonly value="{{val['value']}}" /></div>
                                <input type="hidden" id="slider-range-val{{val['id']}}" name="{{val['name']}}" value="{{val['value']}}" />
                            </div>
                            {{# }; }}
                        </div>
                    </div>
                    {{# }); }}
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <div class="layui-input-block">
                            <input type="button" lay-submit lay-filter="{{index}}Submit" onclick="submitForm('{{index}}')" value="确认"
                                   class="layui-btn">
                        </div>
                    </div>
                </form>
            </div>
            {{# }); }}
        </div>
    </div>
</script>
<script src="../web/res/js/routine/config/index.js"></script>